Introduction

Web Builder 2.x is a WYSIWYG (What-You-See-Is-What-You-Get) program used to create web pages. WYSIWYG means that the finished page will display exactly the way it was designed. The program generates HTML (HyperText Markup Language) tags while you point and click on desired functions; you can create a web page without learning HTML. Just drag and drop objects to the page position them 'anywhere' you want and when you're finished publish it to your web server (using the build in Publish tool).

Web Builder gives you full control over the content and layout of your web page.

Features:

- Drag and drop of the HTML objects: Text, Lines, Images, Marquees and Tables.

- Form layout object to create forms, including actions, hidden fields etc.

- Supports Form fields: Editbox, TextArea, Checkbox, Radiobutton, Combobox and Button.

- Rich text support: text object can contain different fonts, colors, links and sizes.

- Option to add custom HTML for each object (Before Tag, Inside Tag, After Tag).

- Custom HTML object.

- Scripting object (VbScript and Javascript).

- ActiveX, JAVA, Flash, Windows Media player, Quicktime and other Plug-In support.

- Customize the scrollbar colors of your web page!

- Build-in banner creator.

- Rollover image

- Picture gallery object

- Ready-to-use Javascripts

- Navigation bars

- Rotating images (usefull for Ad Banners)

- Import existing HTML pages

- Customize hyperlink colors/format using cascading style sheets.

- Support for 3rd party add-ons using the Web Builder Component Developers Kit (CDK)

- Template support

- Publish to local drive or a FTP server.

- Meta tags.

- Printing/Print preview.

- Clipboard Copy/Cut/Paste.

- Aligning functions.

- Undo/Redo.

- and much more!

Choose one of the following topics:

Getting Started

Menu Options

Credits

Frequently Asked Questions.

© Copyright 2005 Pablo Software Solutions


Getting Started

WYSIWYG Web Builder is a Web site building tool that helps you design and build full-featured Web sites without knowing HTML.

When you preview or publish a page, Web Builder automatically generates the HTML code your Web browser needs to display pages.

Here are a few simple steps to get you started:

Start Web Builder

When Web Builder is started, an empty page is displayed. This is where you can start building your web site.

Or choose File->New from the menu.

Set Page Properties

The first thing you probably want to do is set some general page options. Select View->Page Properties from the menu to show the Page Propeties dialog. Here you can specify things like page title, background image/color, text colors and the page dimensions.

Click OK to make the changes active.

Adding text to the page

Select Insert->Text from the menu and draw a box to indicate the position of the text. Then double click the box to start editing the text. Type some text and (press Enter to goto the next line). The box automatically changes its size to fit the text.

Next you can change the text attributes by highlighting the text you want to modify with the mouse and then choose the new attributes from the Format Toolbar (see Format Tools for more details).

Click anywhere in the page to stop editing.

Adding an image to the page

Select Insert->Image from the menu and draw a box to indicate the position of the image.

The size of the box doesn’t matter; Web Builder automatically adjusts the box to fit the image after you place it.

The Image File Open dialog appears so you can locate the image you want to place in the image box.

Select the image you want to add and click Open to add it to the page.

To resize the image drag the borders of the image object. If you you want to manually specify the image size; Call the Image Properties and select Fit to layout rectangle.

Adding other objects to the page

There are lots of other objects you can place on the page. Check out Insert Menu for a description of the other objects.

Creating (hyper)links

Hyperlinks are text or images that can be clicked to bring the user to another web file such as a web page or image. They are the essence of the World Wide Web as they link pages within sites and web sites to other web sites. To create a hyperlink in Web Builder, read this section about links.

Saving the page

To save your page Select File->Save for the menu and enter a name for the project.

Web Builder uses the extension .wbp to save the project files, to save your page as HTML you have to Publish your page.

To learn more about how to name your pages click here.

Publish the page

Select File->Publish to publish your page to a local folder or a remote FTP server.

For more details check out: Publish.

What's Next?

This help file has a description of most of Web Builder's features.

Select one of the items for more information:

Introduction

Frequently Asked Questions

Description of the available menu items:

File Menu

Edit Menu

View Menu

Insert Menu

Table Menu

Layout Menu

Advanced features:

Forms

Tables

Or go direclty to the description of one of the available objects:

HTML objects:

•	Line

•	Text

•	Image

•	Marquee

•	Link

•	Bookmark

Form objects:

•	Button

•	Image Button

•	Advanced Button

•	Checkbox

•	Radio button

•	Editbox

•	Text Area

•	Combobox

Advanced objects:

•	Flash

•	Quicktime

•	Java Applets

•	Active X

•	Windows Media Player

Web Builder objects:

•	Banner

•	Rollover Image

•	Rotating Image

•	Ready to use Java Scripts

•	Photo Gallery

•	Navigation Bar


Menu Options

The following menu options are available:

File Menu

Edit Menu

View Menu

Insert Menu

Table Menu

Layout Menu

Tools Menu


File Menu

New Page->Blank Page

Creates a new empty web page project.

New Page->From Template

Creates a new web page based on an existing template.

See Templates for more information about templates.

New Page->From Existing HTML Page. Create a new web page based on an existing webpage. You can either select a local HTML file or a URL of an online website. Read this information for more details about importing HTML.

Open

Opens an existing web page project.

Close

Close the active web page project.

Save

Save the active web page project.

To learn more about how to name your pages click here.

Save As

Save the active web page project with a new name.

To learn more about how to name your pages click here.

Save As Template

Save the active web page project to a template.

See Templates for more information about templates.

Export HTML

Export the active web page project to an HTML document.

Publish

Publish the active project. You can choose to publish to a local folder or a remote FTP server.

Check out Publish for more details.

Preview in Browser

Preview the active web page in your default Browser.

Print

Print the active web page.

Print Preview

Show a Print Preview of the active web page.

Print Setup

Change the printer and printer options.

Exit

Quits the application.


Edit Menu

Undo

Undo the last action.

Redo

Redo the previously undone action.

Cut

Cut the selection and put it on the Clipboard.

Copy

Copy the selection and put it on the Clipboard.

Paste

Insert Clipboard contents.

Delete

Erase the selection.

Select All

Select the entire document (all objects).

Properties

Edit properties of the selected object.

See Insert Menu for more details about object properties.

HTML

View generated HTML of the selected object. You can also insert your own HTML code!


View Menu

Toolbar

Standard Tools

Show or hide the standard toolbar.

You will find a description of the available objects on this toolbar in the Edit Menu section.

Advanced Tools

Show or hide advanced tools.

You will find a description of the available objects on this toolbar in the Insert Menu section.

Align Tools

Show or hide align tools.

You will find a description of the available options on this toolbar in the Layout Menu section.

Form Tools

Show or hide form tools.

You will find a description of the available objects on this toolbar in the Insert Menu section.

Format Tools

Show or hide format tools.

HTML Tools

Show or hide HTML tools.

You will find a description of the available objects on this toolbar in the Insert Menu section.

Extra Tools

Show or hide Extra tools.

You will find a description of the available objects on this toolbar in the Insert Menu section.

Statusbar

Show or hide the statusbar.

Object Outlines

Show or hide object borders.

Page Properties

Edit page properties.

Page HTML

View generated HTML of the active document. You can also insert your own HTML code!


Format Tools

Web Builder allows you to make all the same attribute changes you can make in (for example) MS Word.

The first step in changing text attributes is to highlight the text you want to modify with the mouse.

You can then make the following changes:

Font Type

Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New.

To change the font type, select the font you want from the Font Type List Box on the toolbar.

Font Style

The style of the text can either be bold, italics, or underline.

To change the font style, select one or more of the Style Icons on the toolbar.

Font Color

The color of the text can also be changed.

To change the font color, select the Text Color Icon on the toolbar.

The Color Dialog Box appears. Choose the color you want and click OK.

Background Color

To change the background color of the selected text, click the Background Color Icon on the toolbar.

The Color Dialog Box appears. Choose the color you want and click OK.

Font Size

To change the font size, select one of standard HTML font sizes.

1 = 8 pt

2 = 10 pt

3 = 12 pt

4 = 14 pt

5 = 18 pt

6 = 24 pt

7 = 36 pt

Text Aligment

You can change the alignment of the selected text object by using one of the alignment buttons: Left, Center or Right.

Hyperlink Style Sheet

By default all hyperlinks in your webpage use the default HTML link colors (link:blue, visited:purple, active: red).

But since CSS (Cascading Style Sheets) where introduced, more and more websites use different colors to create better looking layouts.

Web Builder gives you the option to customize the way hyperlinks will be displayed in the browser by introducing the Hyperlink Style Sheet Editor.


Page Properties

In the Page Properties dialog you can edit the general properties of the current document.

Page Title

Enter the title of the web page. This title will be displayed in the title bar of the browser's window.

Page Width

Specifies the workspace width of the page.

Page Height

Specifies the workspace height of the page.

Default Font

Specifies the default font that will be used for text you enter in the page.

Size

Specifies the default font size that will be used for text you enter in the page.

File extension

Normally your web page will be published using the .html extension. In some cases it might be necessary to specify another extension like .php of .asp in case your page uses PHP os ASP.

Character Set

The character set tells the browser how to interpret and display the characters on your webpage. Depending on the language of the text on the page it might be necessary to force the browser to another character set. The most common used character sets are: ISO-8859-1 (ANSI) and UTF-8 (UNICODE).

Center in browser

Enabling this option will center the published page in the browser window.

Background Image

Specifies the optional background image. If the image is smaller than the page size it will be tiled.

Background Color

Specifies the color of the background.

Text Color

Specifies the color of the text.

Link Color

This specifies the default, unvisited hyperlinks color.

Visited Link Color

This specifies the color of a followed link.

Active Link Color

This specifies the color of an active link.

Sound

If you want to play a background sound when your page is displayed in the browser you can specify a background sound.

Most common audio types are supported.

Meta tags

Enter the keywords that are used by search engines to index your web pages.

Scrollbars

Microsoft Internet Explorer allows web designers to adjust the colors of the scrollbars to make them match with the rest of the page content. All you have to do is select the colors you like and WYSIWYG Web Builder will add the HTML code for you!


Insert Menu

The following objects can be inserted into your web page:

Select

The Select object is used to select objects.

To select multiple objects, drag a selection box around them, or hold down the Shift key while you click them one at a time.

Line

The Line object is used to insert a horizontal line across the page.

Check out Line Properties for more details.

Text

Probably the most used object is the Text object. It allows you to add text to the web page.

Just drag the object to the page and double click it to start typing your text.

Use the Format Toolbar to change the font, size, color and other properties of the text. To insert a link in the text use the Link option.

Check out Text Properties for more details.

Image

To add images use the Image object. Drag the object to the page and a file dialog will popup to select the image.

Web Builder supports jpg, gif and bmp files at the moment. You can insert any other web image file, but it probably will not correctly display in document.

Check out Image Properties for more details.

Marquee

The Marquee object is used to introduce text that scrolls horizontally (only supported by Microsoft Internet Explorer).

Check out Marquee Properties for more details.

Link

Opens the link dialog for the selected object or text.

Check out Link Properties for more details.

Bookmark

Bookmarks (also called anchors) mark a specific location on a page. With a bookmark a visitor of the page can go directly to a particular part of the page without having to scrolll to it. You can place the Bookmark icon anywhere in the page. Make sure you give the bookmark an unique name. You link to a bookmark from the link dialog.

Form Area

The Form Area object is a container for FORM objects like buttons, editboxes and checkboxes.

You can add any standard form object to a form, including single- and multiple-line text fields, check boxes, radio buttons, scrolling lists, and drop-down lists.

You add objects to a form using the Form toolbar (Form Tools).

You must place form objects inside a form to make them work as part of the form.

Browsers display form objects differently, so test your form on all the browsers and platforms you plan to support.

Check out Form Properties for more details.

Button (Form Control)

Inserts a Button object on a form.

Check out Button Properties for more details.

Image Button (Form Control)

Inserts an Image Button object on a form.

An image button is just like a Submit button. When the visitor of the page clicks on the Image it will preform the action associated with the form.

Check out Image Button Properties for more details.

Advanced Button (Form Control)

Inserts a Advanced Button object on a form (HTML 4 and higher).

The Advanced Button gives you much more control over the appearance and behaviour of a button.

You can change the background color, use different fonts for the text or even activate JavaScript commands.

Check out Advanced Button Properties for more details.

Checkbox (Form Control)

Inserts a Checkbox object on a form.

Checkboxes are on/off switches that may be toggled by the user.

Use Check boxes if want to allow more than one item to be selected.

Check out Checkbox Properties for more details.

Radio button (Form Control)

Inserts a Radio button object on a form.

Radio buttons are like checkboxes except that when several share the same name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".

Check out Radio button Properties for more details.

Editbox (Form Control)

Inserts a Editbox object on a form.

Single-line field that can be used to add name/e-mail address fields.

Check out Editbox Properties for more details.

Text Area (Form Control)

Inserts a TextArea object on a form.

Multi-line editbox which can have as many characters wide and lines tall as you want.

Check out TextArea Properties for more details.

Combobox (Form Control)

Inserts a Combobox object on a form.

Used to allow users to make a selection from a number of different options.

Check out Combobox Properties for more details.

HTML

An HTML object can be used to add custom HTML code to your webpage.

The HTML code that you enter will not be checked for correctness.

Notes:

•	For most objects you can also add extra HTML before, inside of after the automatically generated HTML.

      Select an object and select Edit|HTML from the Web Builder menu.

•	To add extra HTML before, inside of after the HEAD and BODY tags, select View|Page HTML from the Web Builder menu.

Script

To insert Javascript or VB Script to your web page, use the Script Object.

Select the Language (Javascript or VBScript) and type your script in the input box.

ActiveX

You use ActiveX controls to embed an application in a Web page.

Check out ActiveX Properties for more details.

Java

Java applets are an efficient way to add sound and animation, such as scrolling messages and other cool effects, to a page.

Check out Java Properties for more details.

Flash

With Macromedia Flash files (.swf), you can create multimedia, graphics, and audio that downloads quickly. To view these files, site visitors must install the Flash plugin appropriate for their browser and platform. These plugins are available from the Macromedia Web site at www.macromedia.com.

Web Builder creates all of the code you need to add a Flash files to your site.

Check out Flash Properties for more details.

Windows Media Player

Use this object to add media files to your page.

For more details about this object see Windows Media Player Properties.

Quicktime

Use this object to add Quicktime media files to your page.

Check out Quicktime Properties for more details.

Plug-In

Although Web Builder supports a wide variety of media files, you might have other formats, such as Adobe Acrobat PDF files, Real Audio files etc. that you want to include in your site. You can place other files using the Plug-in object.

Parameters of the media file can be added, edited or deleted using the Properties dialog.

Banner

A banner is an image that displays the title of a web page. A banner helps visitors understand what the page is about.

For more details about the Banner object see Banner Properties.

Rollover Image

Rollover images change swap images on rolling over it (onMouseOver event) and reverts back to the original image on rolling out of the object (onMouseOut event).

For more details about this object see Rollover Image Properties.

Photo Gallery

The Photo Gallery object is gives you a tool to create a simple Photo gallery with only a few mouse clicks.

For more details about this object see Photo Gallery Properties.

Navigation Bar

The Navigation Bar (also called link bar or menu bar) is a set of buttons with hyperlinks that enable site visitors to navigate to the pages in your Web site or other parts of the Internet. To learn more about the Navigation Bar click Navigation Bar Properties.

Ready-To-Use Java Script

This feature can be useful if you want to to brighten up your web pages with some cool Java Scripts.

Rotating Image

You can use the Rotating Image object to display different images in succession in the same place on the web page. For example, you could rotate among several images that advertise new products or display advertisements for oher web sites.

For more details about the Rotating Image object see Rotating Image Properties.


Line Properties

The Line object is used to insert a horizontal line across the page.

Description of the Line Properties:

Height

Specifies the line height in pixels.

Line Color

Solid Line (no shade): by default the line is transparent with a shaded border. To specify your own color check this box.

Color: the color of the line.


Text Properties

Probably the most used object is the Text object. It allows you to add text to the web page.

Just drag the object to the page and double click it to start typing your text.

Use the Format Toolbar to change the font, size, color and other properties of the text.

To insert a link in the text use the Link option. For more information about hyperlinks click here.

Most text properties can changed using the format toolbar or using the menubar's format item.

MAKE SURE YOU FIRST HIGHLIGHT THE TEXT YOU WISH TO FORMAT

These are the available formatting options:

Font Type 	- font family of the text, such as Comic Sans, Times New Roman, and Courier New.

Font Size 	- font size.

Bold 	- bold format

Italic 	- italic format

Underlined 	- underlined format

Text Color 	- color of the text

Background color 	- highlight color of the text

Align Left	- Left aligment

Align Center	- Center aligment

Align Right	- Right aligment

The following properties can be changed using the Text Properties window (right click context menu):

Background Color

Specifies the color of the textboxs background. If set to 'Automatic' the webpage background will be used.

Background Image

Specifies the optional background image of the textbox.


Image Properties

To add images use the Image object. Drag the object to the page and a file dialog will popup to select the image.

Web Builder supports jpg, gif and bmp files at the moment. You can insert any other web image file, but it probably will not correctly display in document.

Description of the Image Properties:

Filename: enter the path and filename of the image/picture or select Browse to find an image on your local drive.

Alternate text: this text, usually a short description, appears in place of the object in browser when images are unsupported or have been disabled. In some browsers it appears as a ToolTip when you move the mouse over the image.

Use original size: Select this if you want the image to appear at it's orginal size.

Fit to layout rectangle: Select this if you want to manually specify the image size.

Border thickness: Specifies the thickness of the border around the image. Set this to 0 (zero) for no border.

Link: Enter the URL (Internet Address) to which the object will link.

Target: Enter the window to which the link is targeted.

For example:

NewWindow   (opens the link in a new window).

For more information about hyperlinks click here.


Marquee Properties

The Marquee object is used to introduce text that scrolls horizontally (only supported by Microsoft Internet Explorer).

Description of the Marquee Properties:

Text

Enter the text to scroll.

Bold

Apply bold formatting to the text.

Italic

Apply italic formatting to the text.

Underline

Apply underline formatting to the text.

Fontname

Lists available fonts that you can apply to the text.

Size

Lists available sizes that you can apply to the text.

Text color

Specifies the color of the text.

Background color

Specifies the color of the background.

Direction

This attribute controls the direction of scrolling.

Delay

This controls the delay (in milliseconds) between the successive displays that give the impression of animation.

Amount

This controls the amount of movement (in pixels) between the successive displays that give the impression of animation.

Behaviour

This attribute controls the behaviour of the displayed text.

Align

Align controls the positioning of the marquee text.

Repeat

Number of times to repeat the scrolling (0=Continuously).


Link Properties

Description of the Link Properties:

URL: Enter the URL (Internet Address) to which the object will link.

Target: Enter the window to which the link is targeted.

For example:

_blank  (opens the link in a new window).

_self (open the link in the current frame)

_parent(open the link in the parent frame)

Bookmark: Before you can specify a bookmark to link to, you first have to create a bookmark using the Bookmark object.

For more information about hyperlinks click here.

Appearance

All hyperlinks in your webpage by default use the default HTML link colors (link:blue, visited:purple, active: red).

By defining Hyperlink Styles (CCS) you can adjust the colors and formatting of an hyperlink.

Once you have defined a style you can attach it to the hyperlink by selecting it from the Style dropdown list.

Click the Edit Styles button to add or modify the hyperlink style sheet.


Bookmark

Bookmarks (also called anchors) mark a specific location on a page. With a bookmark a visitor of the page can go directly to a particular part of the page without having to scrolll to it. You can place the Bookmark icon anywhere in the page. Make sure you give the bookmark an unique name. You link to a bookmark from the link dialog.

For more information about hyperlinks click here.


Form Properties

The Form Area object is a container for FORM objects like buttons, editboxes and checkboxes.

You can add any standard form object to a form, including single- and multiple-line text fields, check boxes, radio buttons, scrolling lists, and drop-down lists.

You add objects to a form using the Form toolbar (Form Tools).

You must place form objects inside a form to make them work as part of the form.

Browsers display form objects differently, so test your form on all the browsers and platforms you plan to support.

Tip: Make sure your form contains a Submit button. Without this button the user will not be able to submit the entered data.

For more information about forms read this.

Description of the Form Properties:

Formname

Enter a name for the FORM. This name is primarily used for advanced scripting.

Action

Required attribute, specifying the URL of a CGI script which processes the form and sends back feedback.

There are two methods to send form data to a server. GET will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

Example:

mailto:yourname@yourdomain.com

This will email the results to your email address using the visitors default email client.

Encoding type

Here you can specify an encoding type

the default of "application/x-www-form-urlencoded" is most widely supported.

An alternative is "text/plain", which is typically used in combination when the Action attribute points to a mailto: URL.

If a browser supports both, the contents of the form is sent in plain text to the indicated recipient.

Hidden Fields

You can also add hidden fields that are not rendered but whose values are submitted with a form. Generally hidden fields are used to store information between client/server exchanges that

would otherwise be lost due to the stateless nature of HTTP.

Enable grid

Enables a grid especially for this form.

Background color

Specifies the color of the form background. If set to 'Automatic' the webpage background will be used.

Background image

Specifies the optional background image.


Button Properties

Description of the Button Properties:

Name

Name of the button.

Value/Label

Caption of the button.

Button Type

Submit: When activated, a submit button submits a form. A form may contain more than one submit button.

Reset: When activated, a reset button resets all controls to their initial values.

Normal: Normal (Push) buttons have no default behavior.

Each push button may have client-side scripts associated with the element's event attributes.

When an event occurs (e.g., the user presses the button, releases it, etc.), the associated script is triggered.

If you want more control over the appearence and behaviour of the button you can also use the Advanced Button


Image Button Properties

Inserts an Image Button object on a form.

An image button is just like a Submit button. When the visitor of the page clicks on the Image it will preform the action associated with the form.

Description of the Image Button Properties:

Name

Name of the button.

Image: enter the path and filename of the image/picture.

Use original size: Select this if you want the image to appear at it's orginal size.

Fit to layout rectangle: Select this if you want to manually specify the image size.

The Image button acts the same way as a Button with the type set to: Submit

If you want more control over the appearence and behaviour of the button you can also use the Advanced Button


Advanced Button Properties

Inserts a Advanced Button object on a form (HTML 4 and higher).

The Advanced Button gives you much more control over the appearance and behaviour of a button.

You can change the background color, use different fonts for the text or even activate JavaScript commands.

Description of the Advanced Button Properties:

Name

Name of the button.

Value

Initial value of the button.

Button Type

Normal: Normal (Push) buttons have no default behavior.

Submit: When activated, a submit button submits a form. A form may contain more than one submit button.

Reset: When activated, a reset button resets all controls to their initial values.

OnClick: With this option you can associated a client-side script to the button. Select one of the actions at OnClick action

OnClick action

Here you can specify which action if associated with the button OnClick event:

•	Navigate to the specified URL; enter an URL as OnClick value

•	Open a new window and load the specified URL Close the current browser window; enter an URL as OnClick value

•	Reload; reload the current page (same as Refresh in the Internet Browser).

•	Go to the previous page; the same as Back in the Internet Browser.

•	Go to the next page; the same as Forward in the Internet Browser.

•	Execute Java Script function; specify a script function you've defined elsewhere in the page.

OnClick value

Depending on which OnClick action you've selected you enter the associated value here.

For example for Navigate to the specified URL you enter an URL.

Background color

Specifies the color of the form background. If set to 'Automatic' the standard (system) button color will be used.

Background image

Specifies the optional background image.


Checkbox Properties

Checkboxes are on/off switches that may be toggled by the user.

Use Check boxes if want to allow more than one item to be selected.

Description of the Checkbox Properties:

Name

Name of the checkbox.

Text

Text that appears on the right of the checkbox.

Value

Value of the checkbox when it's switched on.

Initial state

Initial state of the checkbox.


Radio button Properties

Radio buttons are like checkboxes except that when several share the same name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".

Description of the Radio button Properties:

Group Name

The Radio Button will be part of this group.

Radio buttons with the same group name will force the user to select one choice.

Text

Text that appears on the right of the radio button.

Value

Value of the radio button when it is selected.

Initial state

Initial state of the radio button.


Editbox Properties

Single-line field that can be used to add name/e-mail address fields.

Description of the Editbox Properties:

Name

Enter a identifier for the field.

Initial Value

Value that is initially display in the field.

Password field

Makes the editbox a password field so any text entry is diplayed as asterisks ('Yes').

'No' means a plain text field.


TextArea Properties

Multi-line editbox which can have as many characters wide and lines tall as you want.

Description of the TextArea Properties:

Name

Enter a identifier for the field.

Initial Value

Value that is initially display in the field.

When the form is submitted the new or edited text is entered.


Combobox Properties

Used to allow users to make a selection from a number of different options.

Description of the Combobox Properties:

Name

Enter a identifier for the field.

Type

Combobox: this will make the object a drop-down list. Only a single line is displayed at once.

Listbox: this will make the object a standard listbox. Multiple lines are displayed at once.

Allow multiple selections

Allows the user to select multiple items at the same time.

Elements

You can Add, Edit and Delete items that will apperars in the list.

Add

Add a new item to the list.

Edit

Edit an existing item in the list.

Delete

Remove the selected item from the list.

Move Up

Moves the selected item up one position in the list.

Move Down

Moves the selected item down one position in the list.


Flash Properties

With Macromedia Flash files (.swf), you can create multimedia, graphics, and audio that downloads quickly. To view these files, site visitors must install the Flash plugin appropriate for their browser and platform. These plugins are available from the Macromedia Web site at www.macromedia.com. Web Builder creates all of the code you need to add a Flash files to your site.

Description of the Flash Properties:

Movie

Enter a filename of the movie (.swf).

Version

This specifies the minimum Flash version number that the movie needs to play correctly.

Quality

To control the display quality, select a Quality option.

Low favors playback speed over appearance and never uses anti-aliasing.

Autolow emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If the Flash Player detects that the processor can handle it, anti-aliasing is turned on.

Autohigh emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary. Playback begins with anti-aliasing turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to improve playback speed. Use this setting to emulate the View > Antialias setting in Flash.

Medium applies some anti-aliasing and does not smooth bitmaps. It produces a better quality than the Low setting, but lower quality than the High setting.

High favors appearance over playback speed and always applies anti-aliasing. If the movie does not contain animation, bitmaps are smoothed; if the movie has animation, bitmaps are not smoothed.

Best provides the best display quality and does not consider playback speed. All output is anti-aliased and all bitmaps are smoothed.

Scale

To determine how the movie fits in the frame, select a Scale option.

Default (Show all) makes the entire movie visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders may appear on two sides of the movie.

No Border scales the movie to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the movie.

Exact Fit makes the entire movie visible in the specified area without trying to preserve the original aspect ratio. Distortion may occur.

Autostart

To play the movie automatically when the site visitor opens the page, select Auto Start.

Loop

To replay the movie when it ends, select Loop.

Menu

When checked it will display the full menu, allowing the user a variety of options to enhance or control playback.

When not checked it will only display a menu that contains only the Settings option and the About Flash option.


Quicktime Properties

Use this object to add Quicktime media files to your page.

Description of the Quicktime Properties:

File

Enter the filename of the movie.

QuickTime media has a .mov or .qt extension.

Volume

Adjust the initial volume setting for this movie.

Hide All

Select this option if you don’t want to show the movie, but want to use it only as background sound.

Controller

Select this option to display a control bar that site visitors can use to start or stop the movie.

Autostart

To play the movie automatically when the site visitor opens the page, select Auto Start.

Loop

To replay the movie when it ends, select Loop.

Keep movie in user's cache

Select this option to store the movie in the cache on the site visitor’s system.

If the visitor leaves the page and comes back, the movie doesn’t have to be downloaded again because it is already in the system cache.


Banner Properties

A banner is an image that displays the title of a web page. A banner helps visitors understand what the page is about.

Description of the Banner Properties:

Banner Text

Text that will be displayed on the banner.

Use title

This option automatically uses the title of the web page as the banner text. Uncheck this if you want to enter custom text.

Font Type

Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New.

Text Style

Style of the font such as Bold, Italic or Regular.

Text Size

Size of the text.

Text Color

Color of the text.

Banner Size

The size of the banner. Select one of the predefined sizes or 'Fit to layout rectangle' if you want a custom size banner.

Horizontal Alignment

Horizontal alignment of the text.

Vertical Alignment

Vertical alignment of the text.

Background color

Specifies the color of the form background. If set to 'Automatic' the standard (system) button color will be used.

Background image

Specifies the optional background image. If you select an image that is smaller than the specified banner size, the image will be tiled.


Rollover Image Properties

Rollover images change swap images on rolling over it (onMouseOver event) and reverts back to the original image on rolling out of the object (onMouseOut event).

Description of the Rollover Image Properties:

Initial image

Select the image that will be displayed initially.

Mouseover image

Select the image that will be displayed when the mouse is over the object.

Use original size: Select this if you want the image to appear at it's orginal size.

Fit to layout rectangle: Select this if you want to manually specify the image size.

Link: Enter the URL (Internet Address) to which the object will link.

Target: Enter the window to which the link is targeted.

For example:

NewWindow   (opens the link in a new window).

For more information about hyperlinks click here.


Photo Gallery Properties

The Photo Gallery object is gives you a tool to create a Photo gallery with only a few mouse clicks.

Description of the Photo Gallery Properties:

Add

Add one or more images to the photo gallery.

Remove

Remove the selected image(s) from the photo gallery.

Remove All

Remove all selected images from the photo gallery.

Move Up

Move the selected image one place up.

Move Down

Move the selected image one place down.

Thumbnail title

Enter the text that will be displayed under the thumbnail image. To enable titles make sure you selected the 'Include  title' option in the Text Page.

Columns

The number of images per row.

Alignment

Alignment of the thumb images. This option has no effect when the Maintain aspect ration option is off.

Cell Padding

Enter how much space you want between the contents and inside edges of cells, in pixels.

Cell Spacing

Enter how much space you want between the cells in the table, in pixels.

Maintain aspect ratio

Select this option if you want to maintain the aspect ratio of the image in the thumbnail.

If this option is not selected the thumbnail will be resized to fit whole rectangle.

Include title

Include the title of the image under the thumbnail. You can also chnage the font type, size, style and color of the title.


Navigation Bar Properties

Adding a Navigation Bar in WYSIWYG Web Builder is really easy.

Just add a few buttons, assign the links and set the style for the buttons.

Select Add to Add a new button.

Name: text of the button

Link type: type of link usually http:

URL: the URL (Internet Address) to which the button will link

Target: Enter the window to which the link is targeted.

For example:

_blank (opens the link in a new window).

For more information about hyperlinks click here.

Select Edit to modify the properties of an exiting button.

To remove a button from the Navigation Bar select Remove.

You can rearrange the button order by using Move Up and Move Down.

Font Type

Font type is the font family of text, such as Comic Sans, Times New Roman, and Courier New.

Font Style

The style of the text can either be regular, bold, italic, or underline.

Font Color

The color of the text can also be changed.

Font Size

To change the font size, select one of standard HTML font sizes.

1 = 8 pt

2 = 10 pt

3 = 12 pt

4 = 14 pt

5 = 18 pt

6 = 24 pt

7 = 36 pt

Text Aligment

You can change the aligment of the selected text object by using one of the alignment buttons: Left, Center or Right.

Layout Type

The Navigation Bar  can be either Vertical or Horizontal.

Layout Space

This settings specifies the space between 2 buttons.

Style

Select one of the available button styles from the dropdown menu.

By default Web Builder includes a few example styles, but you can easily add your own styles:

Copy your own styles to following subfolder: /navbar, so if you installed Web Builder in the folder:

C:\Program Files\Web Builder\ you need to copy the buttons images (gif, jpg or bmp) to

C:\Program Files\Web Builder\navbar


Java Script Properties

This feature can be useful if you want to to brighten up your web pages with some cool Java Scripts.

Click 'Insert Javascript' and select one of the predefined scripts. Some of the scripts have properties to change the behaviour of the script. To see the effect of the Java Script you will need to preview or publish the web page.

Notes:

- These scripts are not created by Pablo Software Solutions. Where possible the appropriate copyrights are displayed.

- Depending on the configuration of the Internet browser some of these scripts might not work on all systems.

- It is not recommended to use more than one Java Script per page.

You can create add your own Javascripts using the javascript editor which is included in the WYSIWYG Web Builder CDK (Component Developers Kit).


ActiveX Properties

You use ActiveX controls to embed an application in a Web page.

ActiveX controls can add custom capabilities such as audio/movie players, calendars, custom buttons or other features to your pages.

When using ActiveX controls make sure your site visitors use a browser that supports this.

Draw a box to indicate the position of the ActiveX control.

The Insert ActiveX Control dialog appears, listing the ActiveX controls currently installed on your system. At the bottom the selected ActiveX control's path (which has an .ocx or .dll extension) is displayed.

To change the properties of the Active Control choose Properties.

Available properties will be displayed in the window and can be changed by selecting the item and edit the value.

Most ActiveX controls also have a native property page, which your can call using the Properties-button.

Some ActiveX controls do not support HTML as programming language and will behave unexpected, so be sure you test it extensive before you publish your page.


Java Properties

Java applets are an efficient way to add sound and animation, such as scrolling messages and other cool effects, to a page. Java applets are platform-independent applications with compact file sizes.

Most browsers are Java-compatible, so site visitors don’t need special plugins to run a Java applet.

The Java Object makes it easy to insert Java Applets to you page and set their properties.

To choose appropriate properties settings, you should be familiar with Java before you add these types of application files to your site.

You can download JAVA applets from one of these web sites:

http://www.javafile.com/

http://www.freewarejava.com/applets/index.shtml

http://javaboutique.internet.com/

Follow the instructions that come with these applets for more information about the parameters and other settings.


Rotating Image Properties

You can use the Rotating Image object to display different images in succession in the same place on the web page. For example, you could rotate among several images that advertise new products or display advertisements for oher web sites.

For more details about the Rotating Image object see Rotating Image Properties.

To add a rotating image, click the Add-button. You can also assign a link to each the image.

Click Edit to change the properties of an image or Remove to remove it from the list.

You specify the number of seconds to pause before displaying the next image in the sequence.

Move Up

Move the selected image one place up.

Move Down

Move the selected image one place down.


Windows Media Player Properties

Use this object to add media files to your page. This is the most common way to add media files to your web page.

Supported types are:

Audio Files (*.wav,*.snd,*.mp3,*.wma,*.au,*.aifc,*.aiff)

Midi Files (*.mid,*.midi)

Movie Files (*.mpg,*.mpeg,*.m1v,*.mp2,*.mpa,*.mpe,*.mpv2)

Video Files (*.avi,*.wmv)

Windows Media Files (*.wm,*.wmv,*.asf,*.asx,*.wax,*.wma)

Although this object is called Windows Media Player it will actually use the default mediaplayer (for the selected media type) to play the file in the visitors browser.


Table Menu

The Table Menu contains all the operations related to creating and modifying tables.

Insert Table

Draw a box where you want to position the table.

The Insert Table dialog appears.

Enter the number of cells and rows required.

Enter layout and size details and click on OK

Insert Rows or Columns

Select this option if you need to insert additional rows and columns after a table has been created.

Specify if you want to insert Rows of Columns and enter the number of rows/columns to be added.

To insert a column to the left of a selected column, choose Left of selection.

To insert a column to the right of a selected column, choose Right of selection.

To insert a row above a selected row, choose Above Selection.

To insert a row below a selected row, choose Below Selection.

Delete Column

Select this option to delete the selected column.

Delete Row

Select this option to delete the selected row.

Table Properties

Border Size

Enter how wide you want the border to be, in pixels.

Cell Padding

Enter how much space you want between the contents and inside edges of cells, in pixels.

Cell Spacing

Enter how much space you want between the cells in the table, in pixels.

Background color

Specifies the color of the form background. If set to 'Automatic' the webpage background will be used.

Background image

Specifies the optional background image.

Border color

Specifies the color of the table's borders. If set to 'Automatic' the table will have a 3d border.

Table HTML

View generated HTML of the table. You can also insert your own HTML code!

Cell Properties

Edit properties of the selected cell:

Background Color

Specifies the color of the text background. If set to 'Automatic' the webpage background will be used.

Background Image

Specifies the optional background image.

Cell HTML

View generated HTML of the selected cell. You can also insert your own HTML code!

Tip: To edit the properties of all table cells in one operation: select the table (but not a cell) and click Cell Properties.


Layout Menu

The layout menu contains all operations related to the layout of the current page.

You can align, space evenly, make the same size and center objects.


Tools Menu

Verify Links

This option scans your documents for links and displays them in a list.

You can choose to edit them or press the Verify button to validate their current state.

Possible states:

Not verified	- not verified yet

Validated URL	- URL is valid

URL not found	- URL is not valid (or currently not reachable)

This tool can be handy when you want to verify all your links so you don't have to verify them one by one.

Options

Browser compatibilty

Here you can choose between:

Fixed Page Layout - Uses Cascading Style Sheet (CSS) positioning.

New to version 2.x!!! Now you can finally overlap and layer objects.

Dynamic Page Layout - Uses complex hidden tables (classic HTML). Just like previous versions of Web Builder.

This option doesn't allow overlapped/layered objects.

Both types generate completely different output HTML. Although most moderm browsers support CSS, there might be situations where you want to fall back to classic HTML.

In the Folders tab you can specifiy where your Web Builder documents will be saved by default.

Web Builder includes an option to make a copy the images in your document when documents are saved. This can be useful if you weant to keep all your Web Builder related files in one place. This folder will also be used to save images from imported HTML pages.


Credits

This application is programmed by Pablo van der Meer.

website: http://www.pablosoftwaresolutions.com

If you like my software, feel free to make a donation to my PayPal account, so I can continue to improve the software and keep this site up and running.

Check out: http://www.pablosoftwaresolutions.com/html/donate.html for more information

© Copyright 2005 Pablo Software Solutions


WYSIWYG

WYSIWYG means "What-You-See-Is-What-You-Get".

When you edit a document, the displayed layout is an accurate reflection of the way the document will look when published on the web.


Forms

A form provides a way you to collect information from the people who view your web pages.

A viewer enters data or makes choices among several options and then submits the form.

The results can be sent to you by email. If your web server has the right software, you can save the form results in a database.

Fort a description of the avaibale Form properties see Form Properties

Frequently Asked Questions about forms:

1. How do I create a form in WYSIWYG Web Builder?

- Drag the Form object to the page and a draw a box to indicate the position of the form.

- Design your form by adding some Form controls to the form:

•	Button

•	Image Button

•	Advanced Button

•	Checkbox

•	Radio button

•	Editbox

•	Text Area

•	Combobox

You can also make text and images part of the form.

You'll notice that all objects become a part of the form, so when you change the position of the form all those objects move along.

- Make sure your form contains a Submit button. Without this button the user will not be able to submit the entered data.

- Once you have designed your form, you may need to set some properties.

Select the form and choose Edit|Properties from the Web Builder menu.

The most important thing you need to do is specify the form action.

For example to send the entered data to your email address, when the user presses the submit button:

mailto:yourname@yourdomain.com

2. Why doesn't the 'mailto' action work on all PCs?

Sending (client sided) forms from a PC works like this:

Your browser creates a email message and will use your default email client to send this message (using MAPI).

To configure your default email client:

Internet Explorer Menu|Tools|Internet Options|Programs|Email

Select your email client (prefferable Outlook Express).

Also make sure it's the default MAPI client:

In Outlook Express|Menu|Tools|Options|General Tab

and click This application is the default Mail Handler ->Make Default

If you like you can read the following internet articles for more details:

http://webdesign.about.com/cs/forms/a/aamailtobroke.htmor

http://support.microsoft.com/defaul...kb;en-us;186229

or

http://support.microsoft.com/defaul...kb;en-us;279460

If you read the articles above you'll learn this method is not very reliable, it's better to use some kind of server side script to collect the data. See next question.

3. How do I use PHP to collect form data and then send it to my email?

Change the form properties (in Web Builder) to:

Action: feedback.php

Method: POST

EncodingType:

(remove the text/plain, so the field becomes empty)

Now create a new file using Notepad and call it: feedback.php

Enter the following code into the file:

<HTML>

<HEAD>

<TITLE>Thank you for your feedback</TITLE>

</HEAD>

<BODY>

<H2>Thank you for your feedback!</H2>

<?PHP

$email = $HTTP_POST_VARS[email];

$mailto = "yourname@yourdomain.com";

$mailsubj = "Feedback form";

$mailhead = "From: $email\n";

reset ($HTTP_POST_VARS);

$mailbody = "Values submitted from web site form:\n";

while (list ($key, $val) = each ($HTTP_POST_VARS))

{

   $mailbody .= "$key : $val\n";

}

mail($mailto, $mailsubj, $mailbody, $mailhead);

?>

</BODY>

</HEAD>

Upload this file to your web server.


Tables

Tables have columns and rows of cells that can contain text (images, forms, or other page elements are not supported at the moment). Tables are useful for the layout of data; they can be used to simulate columns of text.

When you type text in a table cell it expands horizontally and vertically to accommodate the text that are typed

or inserted. You can edit, format, and specify properties (background color or image) for the text, as well as for the

table cell, row, column, or table itself. You can easily resize cells, columns, rows, or the entire table by the dragging borders.

For more information about the available table options go here.


Publish

You can publish your web pages using the build-in Publish tool.

Select File->Publish to launch the publish dialog.

There are two ways to publish your pages:

•	Publish to a local folder.

•	Publish to a remote FTP server.

Publish to a local folder

Click Add to add a new location to the list.

Enter a name for the location a select Local as type.

Enter the folder where you want to publish the active document.

Click OK to save the data and then click Publish to save the files to the specified folder.

If you do not want to copy images or other components along with the HTML file,

select the Only publish HTML files option. Otherwise all images, activex controls, java applets etc. will be copied the same folder.

Publish to a remote FTP server.

Click Add to add a new location to the list.

Enter a name for the location a select Remote as type and fill in the following fields:

Host

The Host Address field contains the location of the FTP server.

You can either specify a URL or IP address.

Port

The default Port of a FTP connection is 21, but if necessary you can configure something else.

PASV mode

PASV mode is useful for certain types of firewalls that do not allow FTP servers to initiate data connections back to the connected client.

Username

This is where you enter the username of the FTP account that allows you to logon to the FTP Server (also see anonymous setting).

Password

Enter the password of the FTP account.

Anonymous

Some FTP sites allow you to logon with to a 'anonymous' account. When you select this option it will automatically fill in the username (=anonymous) and password (=your email address).

Folder

Specifies the folder on the FTP server where the files are uploaded.

The default is your root directory.

Click OK to save the data and then click Publish to save the files to the specified folder.

If you do not want to upload images or other components along with the HTML file,

select the Only publish HTML files option. Otherwise all images, activex controls, java applets etc. will be uploaded the same folder.


FAQ

Frequently Asked Question:

How is WYSIWYG Web Builder different from a regular HTML editor?

The idea behind this application is to hide HTML from the user. Web Builder is not an HTML editor, but an HTML generator. You don't even have to know there is HTML involved. Just put images, text and other object on your page and your page is ready! You can however add any existing HTML to your page using the advanced page and object HTML tools.

But Web Builder can do much more than that. You can add banners, navigation bars, ready-to-use javascripts and many other things that you can't do using a regular HTML editor.

How do I change the workspace of the webpage?

Select View->Page Properties from the menu and edit the page width or height.

Can I fix my page to a certain width and height?

Although you can specify the page width and height using the page properties. These values aren't fixed.

When you move an object outside the current page size it will automatically adjust the settings to make everything fit.

You can however enable Guide Borders so you can make sure all objects stay inside cetrain limits.

Select Layout|Guide Settings and enable Show Guide Borders.

How do I save my document in HTML?

When you publish the page, Web Builder automatically generates the HTML code for you.

To save the file to a local folder select File->Publish from the menu. See Publish for more information.

How can I add HTML attributes that are not implemented by Web Builder?

If you want to add attributes to a HTML object for example the Image object, select the object and choose edit HTML.

Then to add an attribute click Inside Tag and type your code. Your custom code is displayed in blue.

How do I link pages together?

Read this section about hyperlinks

How do I name my pages?

To learn more about how to name your pages click here.

How do I select multiple objects?

To select multiple objects, drag a selection box around them, or hold down the Shift key while you click them one at a time.

How do I create forms with Web Builder?

Read the section about forms for more information.

Why do overlapped objects display a warning icon (only applies to Dynamic Page Layout Mode)

Standard HTML doesn't allow objects to be overlapped. Since Web Builder generates HTML code it will warn you if objects are overlapped.

Why do all my webpages include the "trans.gif" image? (only applies to Dynamic Page Layout Mode)

The "trans.gif" image is a 1x1-pixel image which is used to make it possible to place HTML objects on an absolute position.

This is how WYSYWYG Web Builder does it's What-You-See-Is-What-You-Get magic...

How do I move objects to another 'layer'?

You can move objects to the front or back by using the + and - keys of your keyboard. Or by selecting Layout|Arrange|Move Forward / Move Back.

How can I resize the last column/row of a table with affecting the other rows?

While resizing the table hold down the Ctrl-key.

I found a bug in your application, what should I do?

Report all bugs or other problems in the support forum: http://www.pablosoftwaresolutions.com/forum

Be sure to include as much details as possible, such as Windows Version, Windows Language and information how to reproduce the error.

How can I make sure you will continue to develop this great utility?

If you would like to help support this software please make a donation via PayPal, so I can continue to improve the software.

Please visit http://www.pablosoftwaresolutions.com/html/donate.html for more details.


Links

Hyperlinks are text or images that can be clicked to bring the user to another web file such as a web page, images or any other file. They are the essence of the World Wide Web as they link pages within sites and web sites to other web sites. To create a hyperlink in Web Builder, follow these steps:

Highlight the text or image that will be the link and select Insert->Link from the menu bar or pressing CTRL+K.

This will display the Insert Hyperlink window.

Link to another page

Enter the full URL (Internet Address) of the destination page in the URL box.

External URLs MUST begin with "http://" or they will not work.

For example, to link to the Pablo Software Solutions home page, type "http://www.pablosoftwaresolutions.com/" instead of "www.pablosoftwaresolutions.com".

Link to a file

To link to a file so your visitors can download it from your web site, enter the complete URL to the file.

For example:

http://www.pablosoftwaresolutions.com/downloads/myfile.zip

or

http://www.pablosoftwaresolutions.com/mydocument.doc

Link to an email address

Select mailto from the Link Type dropdown list.

The URL box will automatically be updated with the mailto: prefix. Now enter the destination email address.

For example:

mailto:webmaster@yourdomain.com

or

mailto:webmaster@yourdomain.com?subject=Website Feedback

Open the link in a new window

To open the link in a new window you must specifiy the Target.

For example:

_blank  (opens the link in a new window).

_self (open the link in the current frame)

_parent(open the link in the parent frame)

Bookmarks

Text and images can be set as bookmarks (also called "anchors") that can be linked to within a page. For example, if a page has seveeral new items, the news titles for each item can be set as bookmarks and a row of links can be added to the top of the page that will each skip down to those bookmarked sections. This method of using bookmarks allows visitors to your site to quickly access information by not having to scroll down the page to view the information they want.

You can create a Bookmark by using the Bookmark tool from the Insert menu and place it anywhere in the page. Make sure you give the bookmark an unique name. Once you have placed the bookmark icon on your page, it can be selected from the Bookmark dropdown list.


Page names

While building your web pages, Web Builder saves them as .wbp files. This is a project file used by Web Builder to simplify the building process. Once your pages are ready you must export or publish them as HTML. Here are a few tips how to name your web pages:

1. Do not add .html or .htm extension to the filenames when saving them in Web Builder. But always give them the .wbp extension.

If you do not specify an extension, Web Builder will add .wbp for you.

Web Builder will automatically add the .html extension when it published (or exports) the HTML code.

2. Always name your homepage: "index", this is the most common name for a homepage.

3. Always use lowercase filenames, most webservers are case sensitive and might fail to find your page if you have called it "Index" or "INDEX"

4. Do not use space or other special characters in the name, keep them simple like:

"page1"

or

"my_products"

5. Use underscores to connect words.


Templates

Web Builder has a very handy feature called 'Templates'.

Templates can later be used by you (or someone else) to use a basis for a new page.

When you save a web page to a template it will include all of the images and other objects in the template file. So there is no need to copy these files seperately. So you simply copy one file from one computer to another and you can start or continue working on your webpages. Web Builder Templates have the .wbt extension and are saved in the sub folder \Templates of the Web Builder folder.

You can also download templates created by other Web Builder users from the Pablo Software Solutions web site:

http://www.pablosoftwaresolutions.com


Hyperlink Style Sheet

By default all hyperlinks in your webpage use the default HTML link colors (link:blue, visited:purple, active: red).

But since CSS (Cascading Style Sheets) where introduced, more and more websites use different colors to create better looking layouts.

Web Builder gives you the option to customize the way hyperlinks will be displayed in the browser by introducing the Hyperlink Style Sheet Editor.

Click Add to add a new hyperlink style.

Each hyperlink style allows you to customize the colors for all four hyperlink states:

Linked (default: blue, underlined)

Visited (default: purple, underlined)

Active (default: red, underlined)

Hover (default: blue, underlined)

Besides the colors you can also change the bold, underline and italic formatting.

Each style must be saved with a unique name.

In the Link Properties window you can attach this name to a link.

Click Edit to modify an exisiting style and Remove to delete it from the list.

Example: Removing the underlining from a link.

1. Create a new style and clear the underline checkbox for all 4 states.

2. Name the style 'no_underline'

3. Click OK to save.

4. Select a link and change the Style from the dropdown list to 'no_underline'

5. Publish or preview the page to view the effect.

Note: the link style become active when you publish or preview your page. Web Builder will always show links in blue.


Import HTML Page

Although Web Builder is NOT an HTML editor, you can import existing HTML pages.

Select New Page|From Existing HTML Page from the menu to display the Import HTML page window.

You can either select an HTML page from your local drive or specify a URL of an online website.

Click OK to start importing the page. Web Builder will automatically copy all images to your local drive (as specified in the Folders page of the Web Builder configuration).

Important notes about importing HTML:

•	WYSIWYG Web Builder is not an HTML editor, but an HTML generator! Web Builder imports the HTML by rendering the contents of an existing page and then attempts to convert the layout to Web Builder's internal object format.

•	The import feature currently only imports text, images, form elements and body attributes (link colors, background images, meta tags). Tables, scripts, stylesheets and multimedia components are not imported. But in most cases this is good enough to get you started.

•	Web Builder does not parse style sheets, so is some cases the text may look different than the original page.

•	Web Builder currently doesn't support framesets. If you want to import a web page that's using frames you'll have to import all individual pages separately.

•	It is very difficult to support all different types of HTML. Even the populair browsers will interpret HTML differently, so don't expect miracles. If a page fails to be imported it probably contains code that Web Builder doesn't understand and you still have to start from scratch.

•	Importing web pages created with WYSIWYG Web Builder will give the best results!